<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/manager' }" style="font-size:18px">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/menumanager' }" style="font-size:18px">菜单管理</el-breadcrumb-item
      >
    </el-breadcrumb>

    <el-card style="font-size: 24px; text-align: left" >

          <el-button type="primary" style="margin-right: 5px" @click="add">添加菜品</el-button>
      <div style="margin: 10px 0">
          <el-input v-model="search" placeholder="请输入关键字" style="width: 260px" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" style="margin-left: 5px" @click="load">查询</el-button>
        </div>

    <el-table :data="foodlist" border stripe height="400px">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column label="菜名" prop="foodname"></el-table-column>
      <el-table-column label="单价" prop="price"></el-table-column>
      <el-table-column label="描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="修改菜品信息"
            :enterable="false"
            placement="top"
          >
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              @click="handleEdit(scope.row)"
            ></el-button>
          </el-tooltip>
          <template>
      <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.foodid)">
            <el-button
              style="margin-left: 10px"
                    slot="reference"
              type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
            ></el-button>
      </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
      <span class="demonstration" style="font-size: 12px">显示总数</span>
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </el-card>

      <div style="margin:10px 0">

    <!-- 添加分类的对话框 -->
    <el-dialog
      title="新增菜品"
      :visible.sync="addCateDialogVisible"
      width="30%">
      <el-form :modal="form" label-width="120px">
        <el-form-item label="菜名：" >
          <el-input style="width:80%" v-model="form.foodname"></el-input>
        </el-form-item>
        <el-form-item label="单价：">
          <el-input style="width:80%" v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input style="width:80%" v-model="form.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
        <!-- 编辑-->
        <el-dialog
         title="修改菜品信息"
         :visible.sync="editCateDialogVisible"
         width="30%">
        <el-form :modal="form" label-width="120px">
        <el-form-item label="菜名：" >
          <el-input style="width:80%" v-model="form.foodname"></el-input>
        </el-form-item>
        <el-form-item label="单价：">
          <el-input style="width:80%" v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input style="width:80%" v-model="form.description"></el-input>
        </el-form-item>
        </el-form>
          <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
        </el-dialog>

    </div>
  </div>
</template>



<script>
import request from"../../utils/request";

export default {
  name: "Home",

  data() {
    return {
      addCateDialogVisible:false,
      editCateDialogVisible:false,
      form:{},
      editoradd:'',
      search:'',
      currentPage:1,
      pageSize:10,
      total:0,
      foodlist:[]
    };
  },
  created() {
    this.load()
  },
  methods: {
    load(){
      request.get("menumanager",{
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res =>{
        console.log(res);
        this.foodlist=res.data.records;
        this.total=res.data.total;
      })
    },
    add(){
      this.editoradd='add';
      this.addCateDialogVisible=true;
      this.form={}
    },
    save() {
        if (this.editoradd == 'edit') {
            request.put("/menumanager", this.form).then(res => {
                console.log(res);
                if (res.code === '0') {
                    this.$message({
                        type: "success",
                        message: "更新成功"
                    })
                } else if (this.editoradd == 'add') {
                    this.$message({
                        type: "error",
                        message: res.msg
                    })
                }
                this.load();
                this.editCateDialogVisible = false;
            });

            request.put("/customermenu",this.form1).then(res =>{
                console.log(res);
                if(res.code==='0'){
                    this.$message({
                        type:"success",
                        message:"更新成功"
                    })
                }else if(this.editoradd=='add'){
                    this.$message({
                        type:"error",
                        message:res.msg
                    })
                }
                this.load();
                this.editCateDialogVisible=false;
            });
        } else {
            request.post("/menumanager", this.form).then(res => {
                console.log(res);
                if (res.code === '0') {
                    this.$message({
                        type: "success",
                        message: "添加成功"
                    })
                } else {
                    this.$message({
                        type: "error",
                        message: res.msg
                    })
                }
                this.load();
                this.addCateDialogVisible = false
            });
        }

    },
    handleSizeChange(pageSize) {//改变当前每页个数触发
      this.pageSize=pageSize;
     this.load()
    },
    handleCurrentChange(pageNum) {//改变当前页码触发
      this.currentPage=pageNum;
      this.load()
    },
    addCateDialogClosed () {
      this.$refs.addCateFormRef.resetFields()
      this.selectedKeys = []
      this.addCateForm.cat_level = 0
      this.addCateForm.cat_pid = 0
    },
    //退出
    signout() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$router.push({ path: "/login.html" });
      });
    },
    handleEdit(row){
      this.editoradd='edit';
      this.form=JSON.parse(JSON.stringify(row));
      this.editCateDialogVisible=true
    },
    handleDelete(foodid){
      console.log(foodid)
      request.delete("/menumanager/"+foodid).then(res =>{
        if(res.code==='0'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
        this.load()
      })
    }

  },
};
</script>
<style scoped>
.container {
  height: 100vh;
  font-size: 15px;
}
.header {
  background: #131518;
  color: rgb(255, 255, 255);
}
.aside {
  background: #3a3a3a;
  color: #fff;
  /* height: 100%; */
}
.main {
  /* height: 100%; */
  color: #a50b0b;
}
.headerlogo {
  line-height: 60px;
  margin-top: 10px;
}
.rightsection {
  line-height: 60px;
  text-align: center;
}
</style>
